<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WPF 控件参考手册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#4f46e5',
                        accent: '#8b5cf6',
                        neutral: '#64748b',
                        'neutral-light': '#f1f5f9',
                        'neutral-dark': '#1e293b'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .control-card {
                @apply bg-white rounded-lg shadow-md p-5 mb-5 transition-all duration-300 hover:shadow-lg border-l-4 border-primary;
            }
            .control-header {
                @apply flex justify-between items-center mb-3;
            }
            .control-title {
                @apply text-xl font-bold text-primary;
            }
            .control-icon {
                @apply text-2xl text-primary/70;
            }
            .control-description {
                @apply text-neutral-dark mb-4;
            }
            .property-list {
                @apply grid grid-cols-1 md:grid-cols-2 gap-3;
            }
            .property-item {
                @apply bg-neutral-light rounded p-3;
            }
            .property-name {
                @apply font-semibold text-secondary;
            }
            .property-desc {
                @apply text-neutral text-sm mt-1;
            }
            .category-header {
                @apply bg-primary text-white p-4 rounded-lg mb-5 shadow-md;
            }
            .category-title {
                @apply text-2xl font-bold;
            }
            .nav-link {
                @apply block py-2 px-4 hover:bg-primary/10 rounded transition-colors duration-200;
            }
            .nav-link.active {
                @apply bg-primary/20 font-medium;
            }
            .search-input {
                @apply w-full px-4 py-2 rounded-lg border border-neutral/30 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all;
            }
            .search-container {
                @apply relative mb-6;
            }
            .search-icon {
                @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="flex flex-col md:flex-row min-h-screen">
        <!-- 侧边栏导航 -->
        <aside class="w-full md:w-64 bg-white shadow-md md:h-screen overflow-y-auto transition-all duration-300">
            <div class="p-5">
                <h1 class="text-2xl font-bold text-primary mb-4">WPF 控件参考</h1>
                <div class="search-container">
                    <input type="text" id="search-control" class="search-input" placeholder="搜索控件...">
                    <i class="fa fa-search search-icon"></i>
                </div>
            </div>
            <nav class="px-4 pb-4">
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">布局控件</h2>
                <ul>
                    <li><a href="#grid" class="nav-link">Grid</a></li>
                    <li><a href="#stackpanel" class="nav-link">StackPanel</a></li>
                    <li><a href="#wrappanel" class="nav-link">WrapPanel</a></li>
                    <li><a href="#dockpanel" class="nav-link">DockPanel</a></li>
                    <li><a href="#canvas" class="nav-link">Canvas</a></li>
                    <li><a href="#uniformgrid" class="nav-link">UniformGrid</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">输入控件</h2>
                <ul>
                    <li><a href="#button" class="nav-link">Button</a></li>
                    <li><a href="#repeatbutton" class="nav-link">RepeatButton</a></li>
                    <li><a href="#textbox" class="nav-link">TextBox</a></li>
                    <li><a href="#passwordbox" class="nav-link">PasswordBox</a></li>
                    <li><a href="#richtextbox" class="nav-link">RichTextBox</a></li>
                    <li><a href="#radiobutton" class="nav-link">RadioButton</a></li>
                    <li><a href="#checkbox" class="nav-link">CheckBox</a></li>
                    <li><a href="#slider" class="nav-link">Slider</a></li>
                    <li><a href="#combobox" class="nav-link">ComboBox</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">显示控件</h2>
                <ul>
                    <li><a href="#textblock" class="nav-link">TextBlock</a></li>
                    <li><a href="#label" class="nav-link">Label</a></li>
                    <li><a href="#image" class="nav-link">Image</a></li>
                    <li><a href="#progressbar" class="nav-link">ProgressBar</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">数据控件</h2>
                <ul>
                    <li><a href="#listbox" class="nav-link">ListBox</a></li>
                    <li><a href="#listview" class="nav-link">ListView</a></li>
                    <li><a href="#datagrid" class="nav-link">DataGrid</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">容器控件</h2>
                <ul>
                    <li><a href="#tabcontrol" class="nav-link">TabControl</a></li>
                    <li><a href="#menu" class="nav-link">Menu</a></li>
                    <li><a href="#treeview" class="nav-link">TreeView</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">日期控件</h2>
                <ul>
                    <li><a href="#calendar" class="nav-link">Calendar</a></li>
                    <li><a href="#datepicker" class="nav-link">DatePicker</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">对话框控件</h2>
                <ul>
                    <li><a href="#openfiledialog" class="nav-link">OpenFileDialog</a></li>
                    <li><a href="#savefiledialog" class="nav-link">SaveFileDialog</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">装饰控件</h2>
                <ul>
                    <li><a href="#border" class="nav-link">Border</a></li>
                    <li><a href="#expander" class="nav-link">Expander</a></li>
                    <li><a href="#groupbox" class="nav-link">GroupBox</a></li>
                    <li><a href="#viewbox" class="nav-link">ViewBox</a></li>
                </ul>
                
                <h2 class="text-lg font-semibold text-neutral-dark mb-2 mt-4">其他控件</h2>
                <ul>
                    <li><a href="#dispatcher" class="nav-link">Dispatcher</a></li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-1 p-6 md:p-10 overflow-y-auto">
            <div class="max-w-7xl mx-auto">
                <header class="mb-10">
                    <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-neutral-dark">WPF 控件参考手册</h1>
                    <p class="text-lg text-neutral mt-3">了解 WPF 中各种控件的功能、属性及使用场景</p>
                </header>

                <!-- 布局控件 -->
                <section id="layout-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">布局控件</h2>
                        <p class="mt-1">用于组织和排列其他控件的容器</p>
                    </div>

                    <div id="grid" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Grid</h3>
                            <i class="fa fa-th control-icon"></i>
                        </div>
                        <p class="control-description">
                            Grid 就像是一个电子表格或棋盘，你可以将它划分为行和列，然后把控件精确地放置在每个单元格中。这是最灵活的布局控件，适合需要精确控制的复杂界面。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">RowDefinitions</div>
                                <div class="property-desc">定义网格的行结构</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ColumnDefinitions</div>
                                <div class="property-desc">定义网格的列结构</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Grid.Row</div>
                                <div class="property-desc">指定控件所在的行</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Grid.Column</div>
                                <div class="property-desc">指定控件所在的列</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Grid.RowSpan</div>
                                <div class="property-desc">指定控件跨越的行数</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Grid.ColumnSpan</div>
                                <div class="property-desc">指定控件跨越的列数</div>
                            </div>
                        </div>
                    </div>

                    <div id="stackpanel" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">StackPanel</h3>
                            <i class="fa fa-list-ul control-icon"></i>
                        </div>
                        <p class="control-description">
                            StackPanel 就像一叠盘子，会按照添加的顺序将控件一个接一个地排列。你可以选择水平排列或垂直排列，非常适合简单的线性布局。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Orientation</div>
                                <div class="property-desc">指定排列方向（水平或垂直）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">HorizontalAlignment</div>
                                <div class="property-desc">子控件的水平对齐方式</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">VerticalAlignment</div>
                                <div class="property-desc">子控件的垂直对齐方式</div>
                            </div>
                        </div>
                    </div>

                    <div id="wrappanel" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">WrapPanel</h3>
                            <i class="fa fa-th-large control-icon"></i>
                        </div>
                        <p class="control-description">
                            WrapPanel 类似于文字处理软件中的自动换行功能。当控件排列到容器边缘时，会自动换到下一行或下一列继续排列，适合需要自动换行的布局，如图片库。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Orientation</div>
                                <div class="property-desc">指定排列方向（水平或垂直）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ItemWidth</div>
                                <div class="property-desc">指定子控件的宽度</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ItemHeight</div>
                                <div class="property-desc">指定子控件的高度</div>
                            </div>
                        </div>
                    </div>

                    <div id="dockpanel" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">DockPanel</h3>
                            <i class="fa fa-arrows control-icon"></i>
                        </div>
                        <p class="control-description">
                            DockPanel 就像码头停靠船只一样，你可以将控件停靠在容器的边缘（上、下、左、右）。剩余空间会留给最后一个控件或未指定停靠位置的控件。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">LastChildFill</div>
                                <div class="property-desc">最后一个子控件是否填充剩余空间</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DockPanel.Dock</div>
                                <div class="property-desc">指定控件的停靠位置</div>
                            </div>
                        </div>
                    </div>

                    <div id="canvas" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Canvas</h3>
                            <i class="fa fa-paint-brush control-icon"></i>
                        </div>
                        <p class="control-description">
                            Canvas 就像一块空白画布，你可以通过指定绝对坐标（X、Y）来精确放置控件。这是最基本的布局控件，但缺乏自动调整功能，适合需要精确定位的场景，如绘图应用。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Canvas.Left</div>
                                <div class="property-desc">控件左边缘与 Canvas 左边缘的距离</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Canvas.Top</div>
                                <div class="property-desc">控件上边缘与 Canvas 上边缘的距离</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Canvas.Right</div>
                                <div class="property-desc">控件右边缘与 Canvas 右边缘的距离</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Canvas.Bottom</div>
                                <div class="property-desc">控件下边缘与 Canvas 下边缘的距离</div>
                            </div>
                        </div>
                    </div>

                    <div id="uniformgrid" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">UniformGrid</h3>
                            <i class="fa fa-table control-icon"></i>
                        </div>
                        <p class="control-description">
                            UniformGrid 是一种特殊的网格，它的所有单元格大小完全相同。适合需要均等分布空间的场景，如计算器按钮面板。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Rows</div>
                                <div class="property-desc">网格的行数</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Columns</div>
                                <div class="property-desc">网格的列数</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 输入控件 -->
                <section id="input-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">输入控件</h2>
                        <p class="mt-1">用于获取用户输入的控件</p>
                    </div>

                    <div id="button" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Button</h3>
                            <i class="fa fa-hand-pointer-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            Button 就像现实生活中的按钮，用户点击后会触发相应的操作。是最基本的交互控件。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Content</div>
                                <div class="property-desc">按钮上显示的文本或图标</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Click</div>
                                <div class="property-desc">按钮被点击时触发的事件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsEnabled</div>
                                <div class="property-desc">按钮是否可用</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsDefault</div>
                                <div class="property-desc">是否为默认按钮（按 Enter 触发）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsCancel</div>
                                <div class="property-desc">是否为取消按钮（按 Esc 触发）</div>
                            </div>
                        </div>
                    </div>

                    <div id="repeatbutton" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">RepeatButton</h3>
                            <i class="fa fa-refresh control-icon"></i>
                        </div>
                        <p class="control-description">
                            RepeatButton 是一种特殊的按钮，当用户按下并保持时，会定期触发 Click 事件。就像计算器上的数字键，按住不放会连续输入同一个数字。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Delay</div>
                                <div class="property-desc">首次重复前的延迟时间（毫秒）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Interval</div>
                                <div class="property-desc">重复触发的时间间隔（毫秒）</div>
                            </div>
                        </div>
                    </div>

                    <div id="textbox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">TextBox</h3>
                            <i class="fa fa-font control-icon"></i>
                        </div>
                        <p class="control-description">
                            TextBox 就像一张便签纸，用户可以在里面输入和编辑单行文本。是最基本的文本输入控件。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Text</div>
                                <div class="property-desc">文本框中的文本内容</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">TextChanged</div>
                                <div class="property-desc">文本内容改变时触发的事件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">MaxLength</div>
                                <div class="property-desc">允许输入的最大字符数</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsReadOnly</div>
                                <div class="property-desc">文本框是否为只读</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">HorizontalContentAlignment</div>
                                <div class="property-desc">文本的水平对齐方式</div>
                            </div>
                        </div>
                    </div>

                    <div id="passwordbox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">PasswordBox</h3>
                            <i class="fa fa-lock control-icon"></i>
                        </div>
                        <p class="control-description">
                            PasswordBox 是一种特殊的文本框，用于输入密码等敏感信息。输入的字符会被掩码（如星号）替代，保护信息安全。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Password</div>
                                <div class="property-desc">密码框中的文本内容</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">PasswordChanged</div>
                                <div class="property-desc">密码内容改变时触发的事件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">MaxLength</div>
                                <div class="property-desc">允许输入的最大字符数</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">PasswordChar</div>
                                <div class="property-desc">用于替换实际字符的掩码字符</div>
                            </div>
                        </div>
                    </div>

                    <div id="richtextbox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">RichTextBox</h3>
                            <i class="fa fa-file-text-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            RichTextBox 就像一个简化版的文字处理器，支持格式化文本（如粗体、斜体、字号等）、段落格式和插入图片等富文本功能。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Document</div>
                                <div class="property-desc">包含富文本内容的文档对象</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Selection</div>
                                <div class="property-desc">当前选中的文本范围</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsReadOnly</div>
                                <div class="property-desc">是否为只读模式</div>
                            </div>
                        </div>
                    </div>

                    <div id="radiobutton" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">RadioButton</h3>
                            <i class="fa fa-dot-circle-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            RadioButton 就像收音机上的频道选择按钮，同一组中的选项只能选择一个。常用于互斥选项的选择。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">IsChecked</div>
                                <div class="property-desc">指示单选按钮是否被选中</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">GroupName</div>
                                <div class="property-desc">将单选按钮分组，同一组中只能选中一个</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Checked</div>
                                <div class="property-desc">单选按钮被选中时触发的事件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Unchecked</div>
                                <div class="property-desc">单选按钮被取消选中时触发的事件</div>
                            </div>
                        </div>
                    </div>

                    <div id="checkbox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">CheckBox</h3>
                            <i class="fa fa-check-square-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            CheckBox 就像任务清单上的复选框，可以独立选择或取消选择。常用于多个独立选项的选择。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">IsChecked</div>
                                <div class="property-desc">指示复选框是否被选中</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsThreeState</div>
                                <div class="property-desc">是否支持三种状态（选中、未选中、不确定）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Checked</div>
                                <div class="property-desc">复选框被选中时触发的事件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Unchecked</div>
                                <div class="property-desc">复选框被取消选中时触发的事件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Indeterminate</div>
                                <div class="property-desc">复选框处于不确定状态时触发的事件</div>
                            </div>
                        </div>
                    </div>

                    <div id="slider" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Slider</h3>
                            <i class="fa fa-sliders control-icon"></i>
                        </div>
                        <p class="control-description">
                            Slider 就像音量控制滑块，用户可以通过拖动滑块在一个范围内选择一个值。适合连续值的选择。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Value</div>
                                <div class="property-desc">滑块当前的值</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Minimum</div>
                                <div class="property-desc">滑块的最小值</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Maximum</div>
                                <div class="property-desc">滑块的最大值</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Orientation</div>
                                <div class="property-desc">滑块的方向（水平或垂直）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsDirectionReversed</div>
                                <div class="property-desc">是否反转值的方向</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">TickPlacement</div>
                                <div class="property-desc">刻度的显示位置</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">TickFrequency</div>
                                <div class="property-desc">刻度的间隔</div>
                            </div>
                        </div>
                    </div>

                    <div id="combobox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">ComboBox</h3>
                            <i class="fa fa-chevron-down control-icon"></i>
                        </div>
                        <p class="control-description">
                            ComboBox 就像一个下拉菜单，平时只显示一个选项，点击后会展开所有选项供用户选择。适合在有限的空间内提供多个选项。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Items</div>
                                <div class="property-desc">下拉列表中的项集合</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedItem</div>
                                <div class="property-desc">当前选中的项</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedIndex</div>
                                <div class="property-desc">当前选中项的索引</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsEditable</div>
                                <div class="property-desc">是否允许用户直接编辑文本</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DropDownOpened</div>
                                <div class="property-desc">下拉列表展开时触发的事件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DropDownClosed</div>
                                <div class="property-desc">下拉列表关闭时触发的事件</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 显示控件 -->
                <section id="display-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">显示控件</h2>
                        <p class="mt-1">用于展示信息的控件</p>
                    </div>

                    <div id="textblock" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">TextBlock</h3>
                            <i class="fa fa-font control-icon"></i>
                        </div>
                        <p class="control-description">
                            TextBlock 就像一块告示牌，用于显示静态文本。它比 Label 更轻量，适合不需要交互的文本显示。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Text</div>
                                <div class="property-desc">显示的文本内容</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">TextWrapping</div>
                                <div class="property-desc">文本换行方式</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">FontSize</div>
                                <div class="property-desc">字体大小</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">FontWeight</div>
                                <div class="property-desc">字体粗细</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Foreground</div>
                                <div class="property-desc">文本颜色</div>
                            </div>
                        </div>
                    </div>

                    <div id="label" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Label</h3>
                            <i class="fa fa-tag control-icon"></i>
                        </div>
                        <p class="control-description">
                            Label 就像商品上的标签，通常用于标识其他控件（如文本框、下拉框等）。它支持简单的交互（如鼠标悬停）和访问键。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Content</div>
                                <div class="property-desc">标签上显示的内容</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Target</div>
                                <div class="property-desc">标签关联的目标控件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">AccessKey</div>
                                <div class="property-desc">标签的访问键（Alt+键）</div>
                            </div>
                        </div>
                    </div>

                    <div id="image" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Image</h3>
                            <i class="fa fa-picture-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            Image 控件用于显示图片，就像相框一样。可以显示本地文件、网络图片或资源中的图像。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Source</div>
                                <div class="property-desc">图像的源文件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Stretch</div>
                                <div class="property-desc">图像的拉伸方式</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">StretchDirection</div>
                                <div class="property-desc">图像的拉伸方向</div>
                            </div>
                        </div>
                    </div>

                    <div id="progressbar" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">ProgressBar</h3>
                            <i class="fa fa-tasks control-icon"></i>
                        </div>
                        <p class="control-description">
                            ProgressBar 就像下载进度条，用于显示操作的进度。可以是确定的（显示具体进度）或不确定的（只显示正在进行）。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Value</div>
                                <div class="property-desc">当前进度值</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Minimum</div>
                                <div class="property-desc">进度的最小值</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Maximum</div>
                                <div class="property-desc">进度的最大值</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsIndeterminate</div>
                                <div class="property-desc">是否为不确定模式</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Orientation</div>
                                <div class="property-desc">进度条的方向（水平或垂直）</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 数据控件 -->
                <section id="data-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">数据控件</h2>
                        <p class="mt-1">用于展示和管理数据的控件</p>
                    </div>

                    <div id="listbox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">ListBox</h3>
                            <i class="fa fa-list control-icon"></i>
                        </div>
                        <p class="control-description">
                            ListBox 就像一个购物清单，显示一组项目，用户可以选择其中一个或多个。适合简单的数据列表展示。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Items</div>
                                <div class="property-desc">列表中的项集合</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedItem</div>
                                <div class="property-desc">当前选中的项</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedIndex</div>
                                <div class="property-desc">当前选中项的索引</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectionMode</div>
                                <div class="property-desc">选择模式（单选、多选等）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ItemsSource</div>
                                <div class="property-desc">列表项的数据源</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DisplayMemberPath</div>
                                <div class="property-desc">用于显示的属性路径</div>
                            </div>
                        </div>
                    </div>

                    <div id="listview" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">ListView</h3>
                            <i class="fa fa-table control-icon"></i>
                        </div>
                        <p class="control-description">
                            ListView 是 ListBox 的增强版，就像一个简化的表格，支持多列数据展示和自定义视图。适合需要分组、排序和复杂数据展示的场景。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">View</div>
                                <div class="property-desc">ListView 的视图定义</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Columns</div>
                                <div class="property-desc">列集合（当使用 GridView 时）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ItemsSource</div>
                                <div class="property-desc">列表项的数据源</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedItem</div>
                                <div class="property-desc">当前选中的项</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectionMode</div>
                                <div class="property-desc">选择模式</div>
                            </div>
                        </div>
                    </div>

                    <div id="datagrid" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">DataGrid</h3>
                            <i class="fa fa-th control-icon"></i>
                        </div>
                        <p class="control-description">
                            DataGrid 就像一个功能完整的电子表格，支持数据的展示、编辑、排序、筛选和分页等功能。适合复杂的数据管理场景。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">ItemsSource</div>
                                <div class="property-desc">表格数据的数据源</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Columns</div>
                                <div class="property-desc">表格的列集合</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">AutoGenerateColumns</div>
                                <div class="property-desc">是否自动生成列</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">CanUserAddRows</div>
                                <div class="property-desc">是否允许用户添加行</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">CanUserDeleteRows</div>
                                <div class="property-desc">是否允许用户删除行</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsReadOnly</div>
                                <div class="property-desc">是否为只读模式</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedItem</div>
                                <div class="property-desc">当前选中的项</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectionMode</div>
                                <div class="property-desc">选择模式</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 容器控件 -->
                <section id="container-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">容器控件</h2>
                        <p class="mt-1">用于组织和管理其他控件的容器</p>
                    </div>

                    <div id="tabcontrol" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">TabControl</h3>
                            <i class="fa fa-folder-open control-icon"></i>
                        </div>
                        <p class="control-description">
                            TabControl 就像文件柜中的抽屉，通过标签页的形式组织内容，用户可以通过点击标签在不同内容之间切换。适合在有限空间内展示多组内容。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Items</div>
                                <div class="property-desc">标签页集合</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedIndex</div>
                                <div class="property-desc">当前选中的标签页索引</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedItem</div>
                                <div class="property-desc">当前选中的标签页</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">TabStripPlacement</div>
                                <div class="property-desc">标签栏的位置（顶部、底部、左侧、右侧）</div>
                            </div>
                        </div>
                    </div>

                    <div id="menu" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Menu</h3>
                            <i class="fa fa-bars control-icon"></i>
                        </div>
                        <p class="control-description">
                            Menu 就像餐厅的菜单，提供一组命令或选项供用户选择。可以是水平菜单栏或上下文菜单（右键菜单）。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Items</div>
                                <div class="property-desc">菜单项集合</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsMainMenu</div>
                                <div class="property-desc">是否为主菜单</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ItemContainerStyle</div>
                                <div class="property-desc">菜单项的样式</div>
                            </div>
                        </div>
                    </div>

                    <div id="treeview" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">TreeView</h3>
                            <i class="fa fa-sitemap control-icon"></i>
                        </div>
                        <p class="control-description">
                            TreeView 就像文件系统的目录树，以层次结构展示数据，用户可以展开或折叠节点。适合展示具有父子关系的数据。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Items</div>
                                <div class="property-desc">树节点集合</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedItem</div>
                                <div class="property-desc">当前选中的节点</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedValue</div>
                                <div class="property-desc">当前选中节点的值</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ItemTemplate</div>
                                <div class="property-desc">节点的模板</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ItemContainerStyle</div>
                                <div class="property-desc">节点容器的样式</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 日期控件 -->
                <section id="date-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">日期控件</h2>
                        <p class="mt-1">用于选择和显示日期的控件</p>
                    </div>

                    <div id="calendar" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Calendar</h3>
                            <i class="fa fa-calendar control-icon"></i>
                        </div>
                        <p class="control-description">
                            Calendar 就像墙上挂的日历，显示一个月的日期，用户可以选择单个日期或日期范围。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">SelectedDate</div>
                                <div class="property-desc">当前选中的日期</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectedDates</div>
                                <div class="property-desc">选中的日期集合（允许多选时）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DisplayDate</div>
                                <div class="property-desc">当前显示的月份</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DisplayMode</div>
                                <div class="property-desc">显示模式（月、年、十年）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">SelectionMode</div>
                                <div class="property-desc">选择模式（单选、多选、范围选择）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">FirstDayOfWeek</div>
                                <div class="property-desc">每周的第一天</div>
                            </div>
                        </div>
                    </div>

                    <div id="datepicker" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">DatePicker</h3>
                            <i class="fa fa-calendar-plus-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            DatePicker 就像一个带有下拉日历的文本框，用户可以直接输入日期，也可以点击下拉按钮从日历中选择。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">SelectedDate</div>
                                <div class="property-desc">当前选中的日期</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DisplayDate</div>
                                <div class="property-desc">下拉日历中显示的日期</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Text</div>
                                <div class="property-desc">文本框中显示的日期文本</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">DateFormat</div>
                                <div class="property-desc">日期的显示格式</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsDropDownOpen</div>
                                <div class="property-desc">下拉日历是否打开</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 对话框控件 -->
                <section id="dialog-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">对话框控件</h2>
                        <p class="mt-1">用于与用户交互的模态对话框</p>
                    </div>

                    <div id="openfiledialog" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">OpenFileDialog</h3>
                            <i class="fa fa-folder-open-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            OpenFileDialog 就像文件浏览器中的"打开文件"对话框，用于让用户选择一个或多个文件。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">FileName</div>
                                <div class="property-desc">选中的文件名</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">FileNames</div>
                                <div class="property-desc">选中的多个文件名（允许多选时）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Filter</div>
                                <div class="property-desc">文件过滤器（如"文本文件 (*.txt)|*.txt|所有文件 (*.*)|*.*"）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">InitialDirectory</div>
                                <div class="property-desc">初始目录</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Multiselect</div>
                                <div class="property-desc">是否允许多选</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Title</div>
                                <div class="property-desc">对话框标题</div>
                            </div>
                        </div>
                    </div>

                    <div id="savefiledialog" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">SaveFileDialog</h3>
                            <i class="fa fa-save control-icon"></i>
                        </div>
                        <p class="control-description">
                            SaveFileDialog 就像文件浏览器中的"保存文件"对话框，用于让用户指定保存文件的位置和名称。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">FileName</div>
                                <div class="property-desc">指定的文件名</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Filter</div>
                                <div class="property-desc">文件过滤器</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">InitialDirectory</div>
                                <div class="property-desc">初始目录</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">OverwritePrompt</div>
                                <div class="property-desc">当文件已存在时是否提示确认</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Title</div>
                                <div class="property-desc">对话框标题</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 装饰控件 -->
                <section id="decoration-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">装饰控件</h2>
                        <p class="mt-1">用于美化和组织界面的控件</p>
                    </div>

                    <div id="border" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Border</h3>
                            <i class="fa fa-square-o control-icon"></i>
                        </div>
                        <p class="control-description">
                            Border 就像相框一样，用于为其他控件添加边框和背景。可以设置边框的粗细、颜色和圆角等。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Child</div>
                                <div class="property-desc">Border 包含的子控件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">BorderBrush</div>
                                <div class="property-desc">边框的画刷（颜色）</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">BorderThickness</div>
                                <div class="property-desc">边框的厚度</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">CornerRadius</div>
                                <div class="property-desc">边框的圆角半径</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Background</div>
                                <div class="property-desc">背景画刷</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Padding</div>
                                <div class="property-desc">内边距</div>
                            </div>
                        </div>
                    </div>

                    <div id="expander" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Expander</h3>
                            <i class="fa fa-chevron-down control-icon"></i>
                        </div>
                        <p class="control-description">
                            Expander 就像一个可折叠的抽屉，有一个标题区域和一个内容区域。用户可以点击展开或折叠内容区域，节省界面空间。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Header</div>
                                <div class="property-desc">标题区域的内容</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Content</div>
                                <div class="property-desc">可展开/折叠的内容</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">IsExpanded</div>
                                <div class="property-desc">指示内容区域是否展开</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">ExpandDirection</div>
                                <div class="property-desc">展开方向（上、下、左、右）</div>
                            </div>
                        </div>
                    </div>

                    <div id="groupbox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">GroupBox</h3>
                            <i class="fa fa-object-group control-icon"></i>
                        </div>
                        <p class="control-description">
                            GroupBox 就像一个带有标题的容器，用于将相关控件组织在一起。可以提供视觉上的分组效果。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Header</div>
                                <div class="property-desc">分组框的标题</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Content</div>
                                <div class="property-desc">分组框内的内容</div>
                            </div>
                        </div>
                    </div>

                    <div id="viewbox" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">ViewBox</h3>
                            <i class="fa fa-search-plus control-icon"></i>
                        </div>
                        <p class="control-description">
                            ViewBox 就像一个放大镜，用于缩放其内容以适应可用空间。可以保持内容的纵横比或拉伸填充空间。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">Child</div>
                                <div class="property-desc">ViewBox 包含的子控件</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Stretch</div>
                                <div class="property-desc">拉伸方式</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">StretchDirection</div>
                                <div class="property-desc">拉伸方向</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 其他控件 -->
                <section id="other-controls" class="mb-16">
                    <div class="category-header">
                        <h2 class="category-title">其他控件</h2>
                        <p class="mt-1">不属于以上类别的特殊控件</p>
                    </div>

                    <div id="dispatcher" class="control-card">
                        <div class="control-header">
                            <h3 class="control-title">Dispatcher</h3>
                            <i class="fa fa-tasks control-icon"></i>
                        </div>
                        <p class="control-description">
                            Dispatcher 不是一个可视化控件，而是 WPF 中的一个核心组件，负责管理线程间的通信。就像一个交通调度员，确保不同线程间的操作有序进行。
                        </p>
                        <div class="property-list">
                            <div class="property-item">
                                <div class="property-name">CurrentDispatcher</div>
                                <div class="property-desc">获取当前线程的 Dispatcher</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">CheckAccess</div>
                                <div class="property-desc">检查当前线程是否可以访问 Dispatcher 关联的对象</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">Invoke</div>
                                <div class="property-desc">在 Dispatcher 关联的线程上同步执行操作</div>
                            </div>
                            <div class="property-item">
                                <div class="property-name">BeginInvoke</div>
                                <div class="property-desc">在 Dispatcher 关联的线程上异步执行操作</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <script>
        // 导航栏滚动效果
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                // 移除所有激活状态
                navLinks.forEach(l => l.classList.remove('active'));
                // 添加当前激活状态
                this.classList.add('active');
            });
        });

        // 搜索功能
        const searchInput = document.getElementById('search-control');
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const controlCards = document.querySelectorAll('.control-card');
            
            controlCards.forEach(card => {
                const title = card.querySelector('.control-title').textContent.toLowerCase();
                const description = card.querySelector('.control-description').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || description.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 20,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>
    